import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useChat } from '@contexts/ChatContext';
import { formatTimestamp, getRelativeTime } from '@utils/time';
import './styles.scss';

/**
 * ConversationList 组件
 * 用于显示对话列表，包括对话标题、最后更新时间等信息
 * 
 * @param {Object} props
 * @param {string} props.searchValue - 搜索关键词
 * @returns {JSX.Element} ConversationList 组件
 */
const ConversationList = ({ searchValue = '' }) => {
    // Hooks
    const navigate = useNavigate();
    const { conversations, deleteConversation } = useChat([]);

    // 处理对话点击
    const handleConversationClick = (id) => {
        navigate(`/chat/${id}`);
    };

    // 处理对话删除
    const handleDeleteConversation = (e, id) => {
        e.stopPropagation();
        if (window.confirm('确定要删除这个对话吗？')) {
            deleteConversation(id);
        }
    };

    // 过滤对话列表
    const filteredConversations = (conversations || []).filter(conversation =>
        conversation.title.toLowerCase().includes(searchValue.toLowerCase())
    );

    return (
        <div className="conversation-list">
            {filteredConversations.length > 0 ? (
                filteredConversations.map(conversation => (
                    <div
                        key={conversation.id}
                        className="conversation-item"
                        onClick={() => handleConversationClick(conversation.id)}
                    >
                        {/* 对话图标 */}
                        <div className="conversation-icon">
                            <i className="ri-chat-1-line" />
                        </div>

                        {/* 对话信息 */}
                        <div className="conversation-info">
                            <div className="conversation-title">
                                {conversation.title || '新对话'}
                            </div>
                            <div className="conversation-meta">
                                <span className="time">
                                    {getRelativeTime(conversation.updatedAt)}
                                </span>
                                <span className="message-count">
                                    {conversation.messageCount || 0} 条消息
                                </span>
                            </div>
                        </div>

                        {/* 操作按钮 */}
                        <div className="conversation-actions">
                            <button
                                className="action-button"
                                onClick={(e) => handleDeleteConversation(e, conversation.id)}
                                title="删除对话"
                            >
                                <i className="ri-delete-bin-line" />
                            </button>
                        </div>
                    </div>
                ))
            ) : (
                <div className="empty-state">
                    <i className="ri-chat-1-line" />
                    <p>暂无对话记录</p>
                </div>
            )}
        </div>
    );
};

export default ConversationList; 